<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_CSS常用值</title>
    <style>
      h1 {
        color: red;
        color:rgb(255,0,0);
        color:rgb(0,255,255);
        color:rgb(0,255,0);
        color:rgb(255,0,255);
        color:rgb(0,0,255);
        color:rgb(255,255,0);
        color:rgb(255,255,255);
        color:rgb(0,0,0);
        color:rgb(128,128,128);
        /*十六进制颜色表示法*/
        color: #FF0000;
        color: #00FF00;
        color: #0000ff;
        color: #000000;
        color: #ffffff;
        color: #668866;
        color: #684224;
        /*十六进制颜色简写表示法   需要每种颜色的两个数字一样才可以简写*/
        color:#f00;
        color:#0f0;
        color:#00f;
        color:#000;
        color:#fff;
        color:#686;
      }
      div {
        width: 100px;
        height: 30px;
        border: 2px solid #000;
      }
      .d1 {/*  rgba透明度  */
        background-color: rgba(255,0,0,1);
      }
      .d2 {
        background-color: rgba(255,0,0,0.7);
      }
      .d3 {
        background-color: rgba(255,0,0,0.5);
      }
      .d4 {
        background-color: rgba(255,0,0,0.3);
      }
      .d5 {
        background-color: rgba(255,0,0,0);
      }
      .bgi {/*  渐变色  */
        width: 200px;
        height: 100px;
        background-image: linear-gradient(160deg,deeppink,deepskyblue);
      }
      .viewport {
        width: 200vw;/*  vw,view width 100% 撑满全屏宽  */
        height: 100vh;/*  vh,view height 100% 撑满全屏高  */
        background-color: pink;
      }
    </style>
</head>
<body>
  <div class="viewport"></div>

  <div class="bgi"></div>

  <hr>
  <h1>测试颜色</h1>
  <!--  .d*5  -->
  <div class="d1"></div>
  <div class="d2"></div>
  <div class="d3"></div>
  <div class="d4"></div>
  <div class="d5"></div>

</body>
</html>